import 'dart:developer';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ball_lion/module/match/detail/zq_data_logic.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/base/wqs_button.dart';
import 'package:ball_lion/widgets/loading/loading_widget.dart';
import 'package:ball_lion/widgets/loading/no_data_widget.dart';

import 'package:ball_lion/widgets/base/wqs_text.dart';

class ZqDataBottomDialog extends StatefulWidget {
  const ZqDataBottomDialog({super.key});

  @override
  State<ZqDataBottomDialog> createState() => _ZqDataBottomDialogState();
}

class _ZqDataBottomDialogState extends State<ZqDataBottomDialog> {
  final logic = Get.put(ZqDataLogic());
  final DraggableScrollableController scrollC = DraggableScrollableController();
  int flag = 0;
  double opacity = 0;

  @override
  void initState() {
    scrollC.addListener(() {
      if (scrollC.size < 0.85) {
        if (flag == 0) {
          Get.back();
          flag++;
        }
      }
      opacity = scrollC.size / 0.87;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ZqDataLogic>(builder: (controller) {
      return GestureDetector(
        onTap: () => Get.back(),
        child: Container(
            color: const Color(0x80000000).withOpacity(opacity),
            width: Get.width,
            height: Get.height,
            child: GestureDetector(onTap: () => log(""), child: _sheet())),
      );
    });
  }

  Widget _sheet() {
    return DraggableScrollableSheet(
        maxChildSize: 0.87,
        initialChildSize: 0.87,
        minChildSize: 0,
        controller: scrollC,
        builder: (context, scrollC) {
          return Container(
            width: Get.width,
            constraints: BoxConstraints(maxHeight: Get.height * 0.87),
            decoration: const BoxDecoration(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(15),
                    topRight: Radius.circular(15)),
                color: Colours.white),
            child: Stack(
              children: [
                SingleChildScrollView(
                  controller: scrollC,
                  physics: const ClampingScrollPhysics(),
                  child: LoadingWidget<String>(
                    isLoading: logic.isLoading,
                    data: logic.data?.nameChs,
                    noData: Container(
                        height: Get.height * 0.95,
                        alignment: Alignment.center,
                        child: const NoDataWidget()),
                    child: () => Column(children: [
                      _soccerHead().paddingSymmetric(horizontal: 16),
                      Container(height: 20),
                      Row(
                        children: List.generate(
                            logic.soccerInfo.length,
                            (index) => Expanded(
                                  child: Row(
                                    children: [
                                      Expanded(
                                          child: Column(
                                        children: [
                                          QsText(logic.soccerType[index],
                                              color: Colours.grey99,
                                              fontSize: 12),
                                          Container(height: 4),
                                          QsText(logic.soccerInfo[index],
                                              fontSize: 13)
                                        ],
                                      )),
                                      if (index != logic.soccerInfo.length - 1)
                                        Container(
                                            width: 0.5,
                                            height: 24,
                                            color: Colours.greyDD)
                                    ],
                                  ),
                                )),
                      ),
                      Container(height: 16),
                      _soccerPoints().paddingSymmetric(horizontal: 16),
                      Container(height: 16),
                      Column(
                        children: soccerData(),
                      ).paddingSymmetric(horizontal: 16)
                    ]),
                  ),
                ),
              ],
            ),
          );
        });
  }

  Widget _soccerHead() {
    return Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Row(
                  children: [
                    Stack(
                      children: [
                        ClipOval(
                          child: CachedNetworkImage(
                              width: 60,
                              height: 60,
                              placeholder: (context, url) =>
                                  Styles.placeholderIcon(),
                              errorWidget: (context, url, error) => Image.asset(
                                  Utils.getImgPath("zq_placeholder.png")),
                              imageUrl: logic.data?.photo ?? ""),
                        ),
                        Positioned(
                          bottom: 0,
                          right: 0,
                          child: ClipOval(
                            child: CachedNetworkImage(
                                width: 20,
                                height: 20,
                                placeholder: (context, url) =>
                                    Styles.placeholderIcon(),
                                errorWidget: (context, url, error) =>
                                    Image.asset(
                                        Utils.getImgPath("zq_placeholder.png")),
                                imageUrl: logic.data?.logo ?? ""),
                          ),
                        ),
                      ],
                    ),
                    Container(width: 10),
                    Flexible(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          QsText(logic.data?.nameChs ?? "",
                              fontSize: 17, fontWeight: FontWeight.w500),
                          Padding(
                            padding: const EdgeInsets.symmetric(vertical: 2),
                            child: Row(
                              children: [
                                // ClipOval(
                                //   child: CachedNetworkImage(
                                //       width: 18,
                                //       height: 18,
                                //       errorWidget: (context,url,error) => Image.asset(Utils.getImgPath("zq_placeholder.png")),
                                //       imageUrl: controller.data?.photo ?? ""),
                                // ),
                                QsText(
                                  logic.data?.countryCn ?? "",
                                  fontSize: 12,
                                  color: Colours.grey66,
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  QsButton(
                    width: 44,
                    height: 20,
                    onPressed: () {},
                    text: logic.data?.rating ?? "-",
                    backgroundColor: Colours.main,
                    textStyle: Styles.mediumText(fontSize: 14)
                        .copyWith(color: Colours.white),
                  ),
                  Container(height: 2),
                  QsText(
                    "本场评分",
                    fontSize: 10,
                    fontWeight: FontWeight.w500,
                  )
                ],
              )
            ],
          ),
        ),
        if (logic.data?.isBest == true)
          Positioned(
              top: 16,
              right: 54,
              child: Image.asset(
                  width: 60, height: 53, Utils.getImgPath("player_mvp.png")))
      ],
    );
  }

  Widget _soccerPoints() {
    return Column(
      children: List.generate(
          logic.data?.countArray?.length ?? 0,
          (index) => logic.data?.countArray?[index].info != null ||
                  logic.data?.countArray?[index].info != ""
              ? Padding(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: Row(
                    children: [
                      Image.asset(
                          width: 16,
                          logic.data?.countArray?[index].type == 1
                              ? Utils.getImgPath("star_red.png")
                              : Utils.getImgPath("star_border.png")),
                      Container(width: 4),
                      QsText(logic.data?.countArray?[index].info ?? "",
                          fontSize: 13, color: Colours.grey66)
                    ],
                  ),
                )
              : Container()),
    );
  }

  List<Widget> soccerData() {
    List<Widget> result = [];
    var title = logic.soccerData.keys.toList();
    var i = 0;
    for (var element in logic.soccerData.values) {
      if (i == 1) {
        if (logic.data?.positionCn == "守门员") {
          result.add(soccerDataItem(
              element.values.toList(), element.keys.toList(), title[i]));
        }
      } else {
        result.add(soccerDataItem(
            element.values.toList(), element.keys.toList(), title[i]));
      }
      i++;
    }
    return result;
  }

  Widget soccerDataItem(List data, List item, String title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        title == ''
            ? Container()
            : Container(
                height: 46.5,
                alignment: Alignment.centerLeft,
                child: QsText(title, fontSize: 16, fontWeight: FontWeight.w500),
              ),
        Wrap(
          children: List.generate(
              data.length,
              (index) => Padding(
                    padding: EdgeInsets.only(
                        bottom: 10,
                        right: title == "" && index != data.length - 1 ? 7 : 0),
                    child: Container(
                      width: (Get.width - 32 - 21) / 4,
                      height: title == '' ? (Get.width - 32 - 21) / 4 : 60,
                      decoration: title == ''
                          ? BoxDecoration(
                              color: Colours.greyF2F3F7,
                              borderRadius: BorderRadius.circular(8))
                          : null,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          QsText(data[index],
                              fontSize: 16, fontWeight: FontWeight.w500),
                          QsText(item[index],
                              fontSize: 12, color: Colours.grey66)
                        ],
                      ),
                    ),
                  )),
        ),
        Container(height: 10),
        const Divider(height: 0.5, color: Colours.greyEE)
      ],
    );
  }
}
